<template>
  <div>
    测试组件
    <!-- <button @click="a = 3">按钮</button> -->
    <p>{{ a }}</p>
    <p>{{ b }}</p>
  </div>
</template>

<script>
// 自定义校验
export default {
  //   props: ["a"],
  // props也是响应式的
  // 侦听器watch可以侦听的东西：data,computed,props
  props: {
    // 属性的值都是构造函数
    // a: [Number, String],
    a: {
      type: [Number, String],
      // required: true, //必填项
      default: 100, //默认值
    },
    b: {
      type: Array,
      // required: true,
      // 如果是对象或数组，它的默认值必须是函数的形式
      default: () => [2, 3, 4],
    },
    c: {
      type: Object,
      default: () => ({ name: "zs" }),
    },
    d: {
      type: String,
      validator: function (value) {
        //只能是男或女
        return ["男", "女"].includes(value);
      },
    },
    e: {
      type: String,
      validator: function (value) {
        const reg =
          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(value);
      },
    },
  },
  // props:{
  //   a:{
  //     type:[Boolean,String],
  //     // required:true
  //     // default:()=>[]
  //     default:()=>({})
  //   }
  // },
  data() {
    return {};
  },
  methods: {
    fn() {
      // this.a = 3;
    },
  },
};
</script>

<style scoped></style>
